
<template>
  <div class="taxi-content">
    <div class="taxi-head">
      <router-link to="/driver/taxi" class="taxi-left">
          <span class="iconfont icon-fanhui">
          </span>
      </router-link>
      <h3>我的钱包</h3>
    </div>
    <ul>
      <li class="item" style=" border-bottom: rgba(254,255,255,0) solid 1px;" >
        <div class="item-info">
          <h4 class="taxi-null"></h4>
        </div>
      </li>

      <li class="item " >
        <img class="item-img" src="../../../assets/img/支付方式.png" />
          <h4 class="item-desc">支付方式</h4>
          <router-link to="/user/paid" class="item-next">
             <span class="iconfont icon-jiantouyou" style="display: block">
              </span>
          </router-link>
      </li>
      <li class="item " >
        <img  class="item-img" src="../../../assets/img/2.png" />
        <h4 class="item-desc">余额</h4>
        <router-link to="/user/have" class="item-next"  >
           <span class="iconfont icon-jiantouyou" style="display: block">

              </span>
        </router-link>
      </li>
      <li class="item " >
        <img class="item-img" src="../../../assets/img/3.png"/>
        <h4 class="item-desc">保险</h4>
          <h4 class="item-desc-whet">您已购买中国平安车险</h4>
          <router-link  to="/user/safe" class="item-next" >
             <span class="iconfont icon-jiantouyou" style="display: block">

              </span>
          </router-link>
      </li>
      <li class="item " >
        <img class="item-img" src="../../../assets/img/4.png" />
        <h4 class="item-desc">发票与报销</h4>
          <router-link to="/user/bill" class="item-next">
             <span class="iconfont icon-jiantouyou" style="display: block">

              </span>
          </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  import Icon from 'vue-awesome/components/Icon'
  import tip from '@/components/tip'
  import computePrice from '@/components/computePrice'
  import {mapActions,mapState,mapGetters} from 'vuex'
  import Bus from "../../bus/bus";
  export default {

    data: {

    },
    computed: {
      ...mapState([
        'position',
        'address',
        'travelList'
      ]),
      traveList() {
        return this.$store.state.travelList
      }
    },
    watch: {
      position(oldVal,newVal) {}
    },
    methods: {
      show_suggest(key) {
        this.$store.dispatch('show_suggest',key)
        this.$router.push({path: '/suggest'})
      }
    },
    components:{
      Bus,
      Icon,
      tip,
      computePrice
    }
  }
</script>
<style scoped>

  .taxi-head{
    position: fixed;
    top: 0px;
    width: 100%;
    line-height: 15vw;
    background: #f3ecf9;
    color: #2b2b2b;
    text-align:center;
  }
  .taxi-left{
    width: 38px;
    height: 38px;
    display: block;
    float: left;
    color: #00A5ED
  }
  .taxi-null{
    position: fixed;
    top: 0px;
    width: 100%;
    line-height: 15vw;
  }

    .taxi-content {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    color: #999;
    background-color: #fff;
    text-align: left;
  }
  .item{
    display: flex;
    height: 55px;
    border-bottom: #dfd8e5 solid 1px;
  }


  .item .item-img{
    /*background-color: rgba(100, 188, 82, 0.37);*/
    width: 48px;
    height: 48px;
    padding: 5px;
  }

  .item .item-desc{
    flex: 1;
    line-height: 54px;
    color: #2b2b2b;

  }

  .item .item-desc-whet{
    color: #cccccc;
    line-height:58px;
    margin-right: 10px;
  }

  .item .item-next{
    line-height: 58px;
    margin-right: 32px;
    color: #a2a2a2;
    text-decoration: none;
  }

</style>

